<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/2
  Time: 10:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>修改密码模块</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>

    <style>
        #address-right{
            margin-left: 10px;
            width: 850px;
            height: 600px;
            margin-top: 10px;
            margin-bottom: 10px;
            border: 1px solid black;
            float: left;
        }
        .address-right-head{
            height: 40px;
            width: 850px;
            margin-top: 10px;
            /* border: 1px solid black; */
            border-collapse: collapse;
        }
        .address-right-head1{

            border-bottom: 2px solid orange;
        }
        .address-right-head3{
            width: 100px;
            height: 30px;
            background-color: #ef771f;
            color: white;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
        }
        .address-font{
            color: orange;
        }
        .header-bottom-search{
            padding-left: 350px;
        }
        .address-right-a{
            margin-left: 10px;
            padding-top: 20px;
            padding-left: 50px;
        }
        .address-right-a1{
            width: 300px;
        }
        .address-right-a2{
            margin-left: 50px;
            margin-top: 20px;
        }
        .address-right2{
            margin-left: 180px;
            margin-top: 10px;
        }
    </style>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>

<!-- 修改密码 -->
<table id="address-right">
    <tr calss="address-rightTr">
        <td>
            <table class="address-right-head">
                <tr class="address-right-head1">
                    <td class="address-right-head2">
                        <div class="address-right-head3">
                            修改密码
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
<%--    修改账号密码表单提交--%>
<%--    <form action="#" method="post">--%>
    <form method="post" action="${pageContext.request.contextPath}/user/updatePassword">
    <tr class="address-right-a " >
        <td  class="address-rightTr">
            <div class="layui-form-item address-right-a2">
                <label class="layui-form-label ">原密码:</label>
                <div class="layui-input-block address-right-a1">
                    <input type="password"  lay-verify="title" autocomplete="off" placeholder="请输入原密码" class="layui-input" id="oldPassword" onblur="checkPasswordOld(oldPassword,checkPasswordOldMsg)"><span id="checkPasswordOldMsg"></span>
                </div>
            </div>
            <div class="layui-form-item address-right-a2">
                <label class="layui-form-label ">新密码:</label>
                <div class="layui-input-block address-right-a1">
                    <input type="password"  lay-verify="title" autocomplete="off" placeholder="请输入新密码" class="layui-input"  id="newPassword" onblur="checkPass(newPassword,checkPasswordNewMsg)"><span id="checkPasswordNewMsg"></span>
                </div>
            </div>
            <div class="layui-form-item address-right-a2">
                <label class="layui-form-label ">确认密码:</label>
                <div class="layui-input-block address-right-a1">
                    <input type="password" name="password" placeholder="请确认密码" autocomplete="off" class="layui-input"  id="truePassword" onblur="checkPasswordTrue(truePassword,checkPasswordTrueMsg)"><span id="checkPasswordTrueMsg"></span>
                </div>
            </div>
            </div>
        </td>
    </tr>
    <tr  class="address-rightTr">
        <td>
            <button 	class="layui-btn layui-btn-radius" style="margin-left: 40px" onclick="notarize(oldPassword,checkPasswordOldMsg,truePassword,checkPasswordTrueMsg)">确认修改</button>
            <button 	class="layui-btn layui-btn-radius layui-btn-danger" style="margin-left: 40px" onclick="callOff()">取消修改</button>
        </td>
    </tr>
    </form>
</table>
</body>
<script>


    function callOff() {
            location.reload();
    }
        //原密码校验
        function checkPasswordOld(obj,msg) {
            if(checkPassword(obj,msg)){//非空校验
                let password = $(obj).val();
                //alert(password);
                $.ajax({
                    url: "${pageContext.request.contextPath}/user/checkPassword",
                    type: "post",
                    data: {
                        password:password
                    },
                    dataType:"json",
                    success:  function (data) {
                        if (data.flag){
                            $(msg).html("<span style='color: green'>"+data.massage+"</span>");
                            return true;
                        }else{
                            $(msg).html("<span style='color: red'>"+data.massage+"</span>");
                            return false;
                        }
                    }
                });
            }
        }
        //确认二次输入密码是否正确
        function checkPasswordTrue(obj,msg) {
            if(checkPassword(obj,msg)) {    //非空校验
                let password = $("#newPassword").val();
                let passwordTrue = $(obj).val();
                if(passwordTrue === password){
                    $(msg).html("<span style='color: green'>密码输入一致</span>");
                    return true;
                }else{
                    $(msg).html("<span style='color: red'>两次密码不一致</span>");
                    return false;
                }
            }
        }

        // alert("密码不能为空");
        function checkPassword(obj,msg) {
            //校验密码是否为空
            let password = $(obj).val();
            if(password){
                $(msg).html("<span>请填写密码:6-32个字符</span>");
                return true;
            }else{
                $(msg).html("<span style='color: red'>密码不能为空</span>");
                return false;
            }
        }

        //校验新密码  6位
        function checkPass(obj,msg){
            let password = $(obj).val();
            if(checkPassword(obj,msg)){
                   // alert($(obj).val());
                    var reg = /^\w{6}$/;
                    if(reg.test(password)){
                        //符合规则
                        $(msg).html("<span style='color: green'>密码符合规则</span>");
                        return true;
                    }else{
                        //不符合规则
                        $(msg).html("<span style='color: red'>密码不符合规则</span>");
                        return false;
                    }
                }
        }
    function notarize(obj,msg,obja,msga) {
        let password = $(obja).val();
        // alert(password);
        let oldflag = checkPassword(obj,msg);
        let newflag = checkPasswordTrue(obja,msga);
        // alert(oldflag+"..."+newflag)
        if (oldflag&&newflag){
            return true;
            // alert(password);
           /* $.ajax({
                url: "${pageContext.request.contextPath}/user/updatePassword",
                type: "post",
                data: {
                    password:password
                },
                dataType: "json",
                success:function (data) {
                    if (data.flag){
                        alert(data.massage);
                        location.href="${pageContext.request.contextPath}/personal/index";
                    }else{
                        alert(data.massage);
                        location.reload();
                    }
                }
            });*/
        }
    }
</script>
</html>
